<template>
	<view class='market-action bg-color-bottombtn'>
		<view class="market-action-container plr-16 ptb-8 flex flex-ai-center flex-js-sb">
			<view v-if="info.status==1 || info.product.already_spelled" class="flex flex-dir-col text-overflow">
				<view class="font-color-price font-w-600" style="color: #1E1E1E;">
					<text class="font-size-12">￥</text>
					<text class="font-size-22">{{info.price}}</text>
				</view>
				<view @click="toMarket" class="flex flex-ai-center mr-12 font-w-600">
					<view class="font-color-white font-size-14" style="color: #1E1E1E;">市场列表</view>
					<w-icon name="right" size="20"></w-icon>
				</view>
			</view>
			<block v-if="info.status == 1 || (info.status == 4 && info.product && info.product.already_spelled > 0)">
				<view v-if="info.product.is_group_sharing == 1">
					<w-button v-if="info.product && info.product.group_sharing_code" type="dark" style='width:480rpx' shape="circle" @click='submitOrder(1,info.product.group_sharing_code)'>
						<view class="flex-dir-col flex-ai-center flex-js-center">
							<view class="flex flex-ai-center">
								<view class="font-size-10">拼团结束：</view>
								<u-count-down v-if="info.product.end_time > 0" @finish='finish' :time="info.product.end_time*1000" format="HH:mm:ss"></u-count-down>
							</view>
							
							<view class="text-center">{{handleLang(`参与拼团${info.product.already_spelled}/${info.product.part_number}`)}}</view>
						</view>
					</w-button>
					<view v-else class="flex flex-ai-center" style="gap:16rpx;">
						<w-button style="flex: 1;" @click='submitOrder()' shape="circle">{{handleLang('立即购买')}}</w-button>
						<w-button v-if="info.product" type="dark" style="width:250rpx;" @click='submitOrder(1)' shape="circle">
							{{`发起拼团${info.product.already_spelled}/${info.product.part_number}`}}
						</w-button>
					</view>
				</view>
				<w-button v-else type="colorful" style='flex: 1;' shape="circle" @click='submitOrder()'>{{handleLang('立即购买')}}</w-button>			
			</block>
			<w-button v-else-if="info.status==2" type="colorful" class='flex-1' :disabled="true" shape="circle">{{handleLang('已出售')}}
			</w-button>
			<w-button v-else-if="info.status==3" type="colorful" class='flex-1' :disabled="true" shape="circle">{{handleLang('已下架')}}
			</w-button>
			<w-button v-else-if="info.status==4" type="colorful" class='flex-1' :disabled="true" shape="circle">{{handleLang('锁单中')}}
			</w-button>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		name: "w-market-action",
		props: {
			info: {
				type: Object,
				default () {
					return {
						product: {
							publisher: {},
							group:{}
						},
						user: {},
						user_collection: {}
					}
				}
			}
		},
		data() {
			return {
				show: false,
				count: 0,
				timer: null,
			};
		},
		methods: {
			...mapActions('order',['confirmOrder']),
			submitOrder(is_group_buy = 0,group_buy_code){
				let data = {
					product: this.info.product,
					income_type:this.info.income_type,
					market_goods_id:this.info.id,
					count: 1,
					order_type: 2,
					maxCount:1,
					is_group_buy
				}
				if(is_group_buy == 1 && group_buy_code) data.group_buy_code = group_buy_code
				uni.setStorage({
					key: 'confirmOrder',
					data,
					success() {
						uni.navigateTo({
							url: "/pages/order/orderSubmit"
						})
					}
				})
			},
			finish(){
				this.$emit('finish')
			},
			toMarket(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.market-action {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);

		&-container {
			height: 120rpx;
		}
		
	}
	/deep/ .u-count-down__text {
			color:#fff;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: center;
		}
</style>
